<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="(item, index) in dataTrigger" :key="index">
      <a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
      <span v-else>{{ item.title }}</span>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
const DATA = [{ href: '/', title: '首页' }]
export default {
  name: 'CBreadcrumb',
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  computed: {
    dataTrigger() {
      if (this.props[1].fields[0].value.dataJson.json) {
        const result = this.props[1].fields[0].value.dataJson.json
        return this.getResult(result)
      } else {
        return DATA
      }
    }
  },
  methods: {
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const fieldHref = model[0].field
      const mappingHref = model[0].mapping
      const keyHref = mappingHref || fieldHref

      const fieldTitle = model[1].field
      const mappingTitle = model[1].mapping
      const keyTitle = mappingTitle || fieldTitle

      if (jsonArray.length > 0) {
        const outJson = []
        jsonArray.forEach(element => {
          outJson.push({
            href: element[keyHref],
            title: element[keyTitle]
          })
        })
        return outJson
      } else {
        return jsonArray
      }
    }
  }
}
</script>
